<template>
    <div class="main">
        <navTop></navTop>
        <div class="banner"></div>
        <div class="containerMain">
            <ul>
                <!-- <li @click="modelclick(1)" :class="tabnum == 1 ? 'hover' : ''">
                    考试管理
                </li> -->
                <li @click="modelclick(2)" :class="tabnum == 2 ? 'hover' : ''">
                    作业管理
                </li>
                <li @click="modelclick(3)" :class="tabnum == 3? 'hover' : ''">
                    成绩管理
                </li>
                <li @click="modelclick(4)" :class="tabnum == 4 ? 'hover' : ''">
                    学校信息
                </li>
                <!-- <li @click="modelclick(5)" :class="tabnum == 5 ? 'hover' : ''">
                    下载中心
                </li> -->
            </ul>
            <div class="contentnav">
                <!-- style="height:calc(100vh - 370px);" -->
                <el-carousel trigger="click" arrow="never" :autoplay="false" v-if="tabnum==1">
                    <el-carousel-item v-for="(item,index) in examlist" :key="index">
                        <div class="markBox">
                            <div v-for="children in item.list" :key="children.name" @click="routerlink(children.link)">
                                <img :src="children.img" alt="" style="width:120px;">
                                <span>{{ children.name }}</span>
                                <b>{{ children.text }}</b>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <el-carousel trigger="click" arrow="never" :autoplay="false" v-if="tabnum==2">
                    <el-carousel-item v-for="(item,index) in homeworklist" :key="index">
                        <div class="markBox">
                            <div v-for="children in item.list" :key="children.name" @click="routerlink(children.link)">
                                <img :src="children.img" alt="" style="width:120px;">
                                <span>{{ children.name }}</span>
                                <b>{{ children.text }}</b>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <el-carousel trigger="click" arrow="never" :autoplay="false" v-if="tabnum==3">
                    <el-carousel-item v-for="(item,index) in scorelist" :key="index">
                        <div class="markBox">
                            <div v-for="children in item.list" :key="children.name" @click="routerlink(children.link)">
                                <img :src="children.img" alt="" style="width:120px;">
                                <span>{{ children.name }}</span>
                                <b>{{ children.text }}</b>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <el-carousel trigger="click" arrow="never" :autoplay="true" v-if="tabnum==4">
                    <el-carousel-item v-for="(item,index) in schoollist" :key="index">
                        <div class="markBox">
                            <div v-for="children in item.list" :key="children.name" @click="routerlink(children.link)">
                                <img :src="children.img" alt="" style="width:120px;">
                                <span>{{ children.name }}</span>
                                <b>{{ children.text }}</b>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <el-carousel trigger="click" arrow="never" :autoplay="false" v-if="tabnum==5">
                    <el-carousel-item v-for="(item,index) in downloadlist" :key="index">
                        <div class="markBox">
                            <div v-for="children in item.list" :key="children.name" @click="routerlink(children.link)">
                                <img :src="children.img" alt="" style="width:120px;">
                                <span>{{ children.name }}</span>
                                <b>{{ children.text }}</b>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
import navTop from "../../components/homework/head.vue"
	export default{
        data(){
            return{
                examlist:[
                    {
                        list:[
                            {   
                                link:'/examoverview',
                                name:'考试概览',
                                text:'创建考试/管理考试/发布考试',
                                img:require('@/assets/image/school/ksgl.png')
                            },
                            {
                                link:'/studentmanage',
                                name:'考生管理',
                                text:'维护考生信息',
                                img:require('@/assets/image/school/ksgl1.png')
                            },
                            {
                                link:'/teachermanage',
                                name:'评阅教师管理',
                                text:'管理评阅教师账号',
                                img:require('@/assets/image/school/jsgl.png')
                            },
                            {
                                link:'/scorerelease',
                                name:'考试成绩管理',
                                text:'考试成绩管理',
                                img:require('@/assets/image/school/ksgl.png')
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            }
                        ]
                    }
                ],
                homeworklist:[
                    {
                        list:[
                            {   
                                link:'/homework',
                                name:'作业管理',
                                text:'扫描/管理/讲解/作业分析',
                                img:require('@/assets/image/school/homework.png')
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            }
                        ]
                    }
                ],
                scorelist:[
                    {
                        list:[
                            {   
                                link:'/gradescoreindex',
                                name:'成绩分析',
                                text:'汇总作业/考试成绩分析或定期/定量汇总分析',
                                img:require('@/assets/image/school/cjfx.png')
                            },
                            // {   
                            //     name:'总结对比分析',
                            //     text:'文案占位文案占位文案占位文案占位文案占位文案占位文案',
                            //     img:require('@/assets/image/school/homework.png')
                            // },
                            {   
                                link:'/academiclevelsetting',
                                name:'学业水平设置',
                                text:'优秀/良好/及格/低分率定义逻辑',
                                img:require('@/assets/image/school/xyspsz.png')
                            },
                            {   
                                // link:'/scorerangesetting',
                                // name:'分数段设置',
                                // text:'自定义成绩区间划分规则',
                                // img:require('@/assets/image/school/fsdsz.png')
                            },
                            {   
                                // link:'/rankingsegmentsetting',
                                // name:'名次段设置 ',
                                // text:'配置排名分段统计逻辑',
                                // img:require('@/assets/image/school/mcdsz.png')
                            },
                            {   
                                // link:'',
                                // name:'赋分设置  ',
                                // text:'管理原始分与标准分转换模型',
                                // img:require('@/assets/image/school/ffsz.png')
                            }
                        ]
                    }
                ],
                schoollist:[
                    {
                        list:[
                            {   
                                link:'/studentinfo',
                                name:'学生信息',
                                text:'维护学生信息',
                                img:require('@/assets/image/school/xxxx.png')
                            },
                            {   
                                link:'/teacherinfo',
                                name:'教师信息',
                                text:'管理教师信息及权限',
                                img:require('@/assets/image/school/jsxx.png')
                            },
                            {   
                                link:'/grademanagement',
                                name:'年级管理',
                                text:'设置学段划分与升学规则',
                                img:require('@/assets/image/school/njgl.png')
                            },
                            {   
                                link:'/classmanagement',
                                name:'班级管理',
                                text:'班级架构管理',
                                img:require('@/assets/image/school/bjgl.png')
                            },
                            {   
                                link:'/subjectmanagement',
                                name:'科目管理',
                                text:'定义考试/作业科目与分析科目定义',
                                img:require('@/assets/image/school/kmgl.png')
                            },
                            {  
                                link:'/topicmanagement',
                                name:'题型管理',
                                text:'定义考试/作业题型的给分规则',
                                img:require('@/assets/image/school/tmgl.png') 
                            }
                        ]
                    }
                    // ,
                    // {
                    //     list:[
                    //         {   
                    //            // link:'/subjectselectionmanagement',
                    //             // name:'选科管理',
                    //             // text:'定义考试选科规则',
                    //             // img:require('@/assets/image/school/xkgl.png') 
                    //         },
                    //         {   
                    //             // link:'/taskset',
                    //             // name:'任务设置',
                    //             // text:'定义考试中评阅教师任务分配规则',
                    //             // img:require('@/assets/image/school/rwsz.png')
                    //         },
                    //         {   
                    //             link:'',
                    //             name:'',
                    //             text:'',
                    //             img:''
                    //         },
                    //         {   
                    //             link:'',
                    //             name:'',
                    //             text:'',
                    //             img:''
                    //         },
                    //         {   
                    //             link:'',
                    //             name:'',
                    //             text:'',
                    //             img:''
                    //         },
                    //         {   
                    //             link:'',
                    //             name:'',
                    //             text:'',
                    //             img:''
                    //         }
                    //     ]
                    // }
                ],
                downloadlist:[
                    {
                        list:[
                            {   
                                link:'/downloadcenter',
                                name:'下载中心',
                                text:'文案占位文案占位文案占位文案占位文案占位文案占位文案',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            },
                            {   
                                link:'',
                                name:'',
                                text:'',
                                img:''
                            }
                        ]
                    }
                ],
                tabnum:2
            }
        },
        methods:{
            modelclick(num){
                this.tabnum = num
            },
            routerlink(link){
                // //console.info(link)
                this.$router.push(link)
            }
        },
		components:{navTop}
	}
</script>

<style scoped>
    .main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;
		overflow-x:hidden;
		overflow-y: auto;
	}
    .banner{
		height: 240px;
		background: url('../../assets/image/school/login/loginbanner.png') no-repeat center;
        background-size:cover
	}
    .containerMain{
        width:1400px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
    }
    .containerMain ul{
        width:145px;
        padding-top:20px;
    }
    .containerMain ul li{
        height:60px;
        line-height:60px;
        font-size:18px;
        color:#2A303B;
        padding-left:62px;
        position:relative;
        cursor: pointer;
        text-align: right;
    }
    .containerMain ul li::after{
        content: '';
        width: 24px;
        height: 8px;
        background: #DEE1E7;
        position:absolute;
        left:0;
        top:50%;
        transform: translateY(-50%);
        transition: width .3s;
    }
    .containerMain ul li:hover,.containerMain ul li.hover{
        color:#295CFF
    }
    .containerMain ul li:hover::after,.containerMain ul li.hover::after{
        content: '';
        width:64px;
        height: 8px;
        background: #295CFF;
        position:absolute;
        left:0;
        top:50%;
        transform: translateY(-50%);
    }
    .contentnav{
        width: calc(100% - 210px);
        background:#FDFDFD;
        height:calc(100vh - 350px);
    }
    .markBox{
        width:100%;
        height:calc(100vh - 350px);
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding:0 15px;
    }
    .markBox div{
        box-sizing: border-box;
        width:33%;
        border-right:solid 1px #EFF1F4;
        border-bottom:solid 1px #EFF1F4;
        padding:30px 30px 0;
        cursor: pointer;
        text-align: center;
        height: calc((100vh - 350px) / 2);
    }
    .markBox div:nth-child(3n){
        border-right:none;
    }
    .markBox div:nth-child(4),.markBox div:nth-child(5),.markBox div:nth-child(6),.markBox div:nth-child(10),.markBox div:nth-child(11),.markBox div:nth-child(12){
        border-bottom:none;
    }
    .markBox div img{
        display: block;
        margin:0 auto;
    }
    .markBox div span{
        font-size:18px;
        color:#2A303B;
        padding-bottom:10px;
    }
    .markBox div b{
        display: block;
        font-weight: normal;
        font-size:14px;
        color:#8E96A4;
        padding-top:10px;
    }
    .containerMain >>> .el-carousel{
        height:calc(100vh - 350px);
    }
    .containerMain >>> .el-carousel__container{
        height:calc(100vh - 350px);
    }
    .containerMain >>> .el-carousel__button{
        width: 24px;
        height: 8px;
        background: #DEE1E7;
    }
    .containerMain  >>> .is-active  .el-carousel__button{
        background:#295CFF
    }
</style>